page {
    background: #f5f5f5;
    overflow: hidden;
	padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);

}

.container {
    @include wh(100%);

    .screen-layout {
        @include wh(750rpx);
        padding-bottom: 16rpx;
        box-sizing: border-box;
        position: fixed;
        z-index: 10;
        background: #ffffff;

        .item-layout {
            @include wh(100%, 76rpx);
            @include flex(center, space-between);
            @include fonts(26rpx, #939395);
            padding: 0 24rpx;
            box-sizing: border-box;

            .check {
                @include fonts(26rpx, #967e4f, bold);
            }

            .item {
                @include flex(center, center);

                image {
                    @include wh(32rpx, 32rpx);
                    margin-left: 8rpx;
                }
            }

            .item-card {
                @include wh(218rpx, 64rpx);
                @include flex(center, space-between);
                padding: 14rpx 16rpx;
                box-sizing: border-box;
                background: #f9f9f9;
                border-radius: 8rpx;

                .item-card-label {
                    @include wh(calc(100% - 32rpx - 8rpx));
                    @extend %text-overflow;
                }

                .checkItemCard{
                    @include fonts(26rpx, #967E4F,bold);
                }

                image {
                    @include wh(32rpx, 32rpx);
                }
            }
        }
        
        .popup-card {
            max-height: 65vh;
            background: #ffffff;
            
            .popup-layout {
                padding: 48rpx 24rpx 0 24rpx;
                box-sizing: border-box;

                .title {
                    @include fonts(28rpx, #222222, bold);
                    margin-bottom: 36rpx;
                }

                .price-card-layout {
                    @include flex(center, space-between);
                    margin-bottom: 60rpx;
                    .price-card {
                        @include wh(318rpx, 88rpx);
                        @include flex(center,flex-start);
                        padding: 24rpx;
                        box-sizing: border-box;
                        background: #F9F9F9;
                        border-radius: 8rpx;
                        image{
                            @include wh(36rpx,36rpx);
                            margin-right: 16rpx;
                        }
                        .placeholder{
                            @include fonts(28rpx,#C9C9C9,400);
                        }
                        input{
                            @include fonts(28rpx, #222222, bold);
                        }
                    }
                    .line{
                        @include wh(15rpx,6rpx);
                        background: #BFBFBF;

                    }
                }

                .label-layout{
                    max-height: 336rpx;
                    overflow-y: scroll;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;

                    .label{
                        @include wh(218rpx,88rpx);
                        @include flex(center,center);
                        @include fonts(28rpx,#636569);
                        background: #F9F9F9;
                        border-radius: 8rpx;
                        margin-bottom: 24rpx;
                        border: 1rpx solid #F9F9F9;
                    }
                    .checkLabel{
                        @include fonts(28rpx, #222222, bold);
                        background: #F9F9F9 linear-gradient(87deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%);
                    }

                    .checkLabel2{
                        background: #FFFFFF;
                        border: 1rpx solid #222222;
                    }

                    /* 如果最后一行是3个元素 */
                    .label:last-child:nth-child(3n - 1) {
                        margin-right: calc(32.5% + 3% / 3);
                    }
                    /* 如果最后一行是2个元素 */
                    .label:last-child:nth-child(3n - 2) {
                        margin-right: calc(65% + 6% / 3);
                    }

                }


                .label-layout2{
                    max-height: 540rpx;
                    overflow-y: scroll;
                    overflow-x: hidden;
                    display: grid;
                    grid-template-columns: repeat(4, 140rpx);
                    grid-column-gap: 46rpx;
                    grid-row-gap: 36rpx;
                    padding-left: 2rpx;
                    box-sizing: border-box;
                    .label-item{
                        @include wh(140rpx);
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        .label2{
                            @include wh(140rpx,100rpx);
                            @include flex(center,center);
                            background: #F9F9F9;
                            border-radius: 4rpx;
                            border: 1rpx solid #F9F9F9;
                            image{
                                @include wh(100rpx,100rpx);
                            }
                        }

                        .checkLabel2{
                            background: #FFFFFF;
                            border: 1rpx solid #222222;
                        }
                        
                        .label-name{
                            @include wh(140rpx);
                            @include fonts(24rpx,#939395);
                            @extend %text-overflow;
                            text-align: center;
                            margin-top: 12rpx;
                        }
                    }
                }
            }

            .but-layout{
                @include flex(center,space-between);
                padding: 84rpx 24rpx 48rpx 24rpx;
                box-sizing: border-box;
                .but{
                    @include wh(338rpx,80rpx);
                    @include flex(center,center);
                    @include fonts(30rpx, #222222, bold);
                    background: #F5F5F5;
                    border-radius: 8rpx;
                }
                .but-confirm{
                    @include fonts(30rpx, #FFFFFF, bold);
                    background: #222222;
                }
            }
        }
    }

    .scroll-view{
        padding: 10rpx;
        box-sizing: border-box;

        .list-layout {
            // ,calc(100vh - 164rpx)
            @include wh(100%);
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            position: relative;
            padding-bottom: calc(env(safe-area-inset-bottom) + 200rpx);
            box-sizing: border-box;
            .list-card {
                @include wh(calc((100% - 10rpx) / 2),620rpx);
                background: #ffffff;
                margin-bottom: 10rpx;
    
                .goodsImg {
                    @include wh(100%, 360rpx);
                    @include flex(center, center);
                    position: relative;
                    image {
                        @include wh(272rpx, 272rpx);
                    }
                    .like-icon{
                        @include wh(48rpx,48rpx);
                        position: absolute;
                        right: 22rpx;
                        top: 22rpx;
                    }
                }
    
                .text-content {
                    padding: 12rpx 24rpx 40rpx 12rpx;
                    box-sizing: border-box;
    
                    .title {
                        @include fonts(28rpx, #222222, bold);
                        margin-bottom: 24rpx;
                        @extend %text-overflow;
                    }
    
                    .content {
                        @include fonts(24rpx, #939395, 400);
                        @include text-overflow-many(2);
                        margin-bottom: 16rpx;
                        .label{
                            @include fonts(22rpx,#967E4F,bold);
                            display:inline;
                            margin-right: 8rpx;
                            padding: 0 8rpx;
                            box-sizing: border-box;
                            background: #F4F2ED;
                        }
                    }
    
                    .money {
                        @include flex(flex-end, flex-start);
    
                        .price {
                            @include fonts(32rpx, #222222, bold);
                        }
    
                        .originalPrice {
                            @include fonts(24rpx, #939395, 400);
                            text-decoration: line-through;
                            margin-left: 12rpx;
                        }
                    }
                }
            }
        } 
    }


    
    .popup-bottom-layout{
        height: 100vh;
        width: 100%;
        // background: rgba(0, 0, 0, 0.5);
        position: fixed;
        bottom: 0;
        z-index: 1003;
        
        transform: translateY(100%);
        transition: transform .3s;
        .popup-bottom{
            height: 86%;
            width: 100%;
            position: absolute;
            bottom: 0;
            background: #ffffff;
            padding: 0 24rpx;
            box-sizing: border-box;
            .title-layout{
                @include flex(center,center);
                @include fonts(28rpx,#222222,bold);
                position: relative;
                padding: 40rpx 0 20rpx 0;
                .close{
                    @include wh(32rpx,32rpx);
                    position: absolute;
                    top:40rpx;
                    right: 20rpx;
                }

            }

            .popup-bottom-content{
                max-height: calc(100% - 176rpx - 100rpx - env(safe-area-inset-bottom));
                overflow-y: scroll;
                .title-label{
                    @include flex(center,space-between);
                    @include fonts(28rpx,#222222,bold);
                    padding: 48rpx 0 24rpx 0;
    
                    .title-label-right{
                        @include flex(center,flex-end);
                        @include fonts(26rpx,#939395,400);
                        image{
                            @include wh(32rpx,32rpx);
                            margin-left: 8rpx;
                        }
                    }
                }
    
                .price-card-layout {
                    @include flex(center, space-between);
                    margin-bottom: 60rpx;
                    .price-card {
                        @include wh(318rpx, 88rpx);
                        @include flex(center,flex-start);
                        padding: 24rpx;
                        box-sizing: border-box;
                        background: #F9F9F9;
                        border-radius: 8rpx;
                        image{
                            @include wh(36rpx,36rpx);
                            margin-right: 16rpx;
                        }
                        .placeholder{
                            @include fonts(28rpx,#C9C9C9,400);
                        }
                        input{
                            @include fonts(28rpx, #222222, bold);
                        }
                    }
                    .line{
                        @include wh(15rpx,6rpx);
                        background: #BFBFBF;
    
                    }
                }
    
                .label-layout{
                    overflow-x: hidden;
                    flex-wrap: wrap;
                    display: grid;
                    grid-template-columns: repeat(3, 218rpx);
                    grid-column-gap: 24rpx;
                    grid-row-gap: 24rpx;
                    .label{
                        @include wh(218rpx,88rpx);
                        @include flex(center,center);
                        @include fonts(28rpx,#636569);
                        background: #F9F9F9;
                        border-radius: 8rpx;
                        margin-bottom: 24rpx;
                        border: 1rpx solid #F9F9F9;
                    }
                    .checkLabel{
                        @include fonts(28rpx, #222222, bold);
                        background: #F9F9F9 linear-gradient(87deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%);
                    }
    
                    .checkLabel2{
                        background: #FFFFFF;
                        border: 1rpx solid #222222;
                    }
    
                    // /* 如果最后一行是3个元素 */
                    // .label:last-child:nth-child(3n - 1) {
                    //     margin-right: calc(32.5% + 3% / 3);
                    // }
                    // /* 如果最后一行是2个元素 */
                    // .label:last-child:nth-child(3n - 2) {
                    //     margin-right: calc(65% + 6% / 3);
                    // }
    
                }
    
    
                .label-layout2{
                    overflow-x: hidden;
                    display: grid;
                    grid-template-columns: repeat(4, 140rpx);
                    grid-column-gap: 46rpx;
                    grid-row-gap: 36rpx;
                    padding-left: 2rpx;
                    box-sizing: border-box;
                    .label-item{
                        @include wh(140rpx);
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        .label2{
                            @include wh(140rpx,100rpx);
                            @include flex(center,center);
                            background: #F9F9F9;
                            border-radius: 4rpx;
                            border: 1rpx solid #F9F9F9;
                            margin-top: 1rpx;
                            image{
                                @include wh(100rpx,100rpx);
                            }
                        }
    
                        .checkLabel2{
                            background: #FFFFFF;
                            border: 1rpx solid #222222;
                        }
                        
                        .label-name{
                            @include wh(140rpx);
                            @include fonts(24rpx,#939395);
                            @extend %text-overflow;
                            text-align: center;
                            margin-top: 12rpx;
                        }
                    }
                }
    
            }


            .but-layout{
                @include flex(center,space-between);
                padding: 84rpx 0 calc(env(safe-area-inset-bottom) + 20rpx) 0;
                box-sizing: border-box;
                .but{
                    @include wh(338rpx,80rpx);
                    @include flex(center,center);
                    @include fonts(30rpx, #222222, bold);
                    background: #F5F5F5;
                    border-radius: 8rpx;
                }
                .but-confirm{
                    @include fonts(30rpx, #FFFFFF, bold);
                    background: #222222;
                }
            }


        }


    }

    .popup-bottom-show{
        transform: translateY(0);
    }
    
}